<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雨天粒子效果2</title>
    <script type="text/javascript" src="http://172.29.1.151:8080/libs/Cesium/1.40/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="http://172.29.1.151:8080/libs/Cesium/1.40/Build/Cesium/Widgets/widgets.css"
          type="text/css"/>
    <style>
        html, body, #map3d {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            cursor: default;
        }
    </style>
</head>
<body>
<div id="map3d"></div>
<script>
    var viewer = new Cesium.Viewer('map3d', {
        baseLayerPicker: false,
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
            url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
        })
    });

    var scene = viewer.scene;
    scene.debugShowFramesPerSecond = true;

    var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(114.0, 30.0));

    var minX = -1000.0;
    var maxX = 1000.0;
    var minY = -800.0;
    var maxY = 1000.0;
    var minZ = -500.0;
    var maxZ = 500.0;

    var rainCount = 100;
    var color = Cesium.Color.fromRandom({red: 0.75, green: 0.0, blue: 0.8, alpha: 1.0});
    for (var i = 0; i < rainCount; i++) {

        var x = Cesium.Math.randomBetween(minX, maxX);
        var y = Cesium.Math.randomBetween(minY, maxY);
        var z = Cesium.Math.randomBetween(minZ, maxZ);
        var height = Cesium.Math.randomBetween(800, 1000);
        var offset = new Cesium.Cartesian3(x, y, z);
        var position = Cesium.Cartesian3.add(new Cesium.Cartesian3(0.0, 0.0, height), offset, new Cesium.Cartesian3());
        var emitterMatrix = Cesium.Matrix4.fromTranslation(position, new Cesium.Matrix4());
        viewer.scene.primitives.add(new Cesium.ParticleSystem({
            image: 'rainy.png',
            // startColor: color.withAlpha(0.7),
            // endColor: color.withAlpha(0.0),
            life: 20,
            speed: Math.floor(Math.random() * 20 + 1),
            width: 6,
            rate: 1,
            height: 6,
            lifeTime: 16,
            loop: true,
            emitter: new Cesium.CircleEmitter(0.5),
            emitterModelMatrix: emitterMatrix,
            modelMatrix: modelMatrix,
            forces: [applyGravity]
        }))
    }

    function applyGravity(particle, dt) {
        var position = particle.position;
        var gravityVector = Cesium.Cartesian3.normalize(position, new Cesium.Cartesian3());
        Cesium.Cartesian3.multiplyByScalar(gravityVector, -100 * dt, gravityVector);
        particle.velocity = Cesium.Cartesian3.add(particle.velocity, gravityVector, particle.velocity);
    }

    var camera = viewer.scene.camera;
    var cameraOffset = new Cesium.Cartesian3(-600.0, 0.0, 0.0);
    camera.lookAtTransform(modelMatrix, cameraOffset);
</script>
</body>
</html>